import { isValidArr } from "@/utils";
import classnames from "classnames";
import { Button } from "antd-mobile";

export default function ({cards, selected, handler}) {
  return (
    <>
      <div className="inner">
        <div className="header">
          <div className="title">选择本局道具</div>
          <div className="subtitle">点击选择</div>
        </div>
        <div className="content">
          <div className="cards">
            {
              isValidArr(cards) &&
              cards.map((item, index) => {
                return <div key={index}
                            className={classnames(`card-item`, {
                              active: selected?.id === item?.id,
                              disabled: item?.status === 0
                            })}
                            onClick={e => {
                              if (item?.status === 0) return;
                              handler.stuff.select(item)
                            }}
                >
                  <div className="card-thumb">
                    <img src={item?.icon} alt="" />
                  </div>
                  {/*<div className="label">{item?.name}</div>*/}
                </div>
              })
            }

          </div>
        </div>
        <div className="footer">
          <Button shape={`rounded`}
                  className="act-btn act-btn-bevel"
                  onClick={e => {
                    // selectedTimes = CARD_MAP[selected?.condition]?.times || 1
                    handler.stuff.selected()
                  }}
          >
            {selected?.name ? `确定` : `直接开始`}
          </Button>
        </div>
      </div>
    </>
  )
}